iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 20
2
Modern Web

一隻巨大的UI/UX菜鳥系列 第 20

【Day20】Wireframe、Mockup與Prototype的差異?

  • 分享至 

  • xImage
  •  

在小妹來到Monospace之前,完全沒有聽過這些專有名詞/images/emoticon/emoticon16.gif
與隔壁工程師團合作專案時,剛開始完全聽不懂他們在說些什麼/images/emoticon/emoticon06.gif
有種來到另一個國家,在學第三語言的感覺XD

Wireframe、Mockup與Prototype
在網頁設計中是很重要的三個觀念。
在這邊跟大家分享一篇寫得很棒的文章!
WIREFRAME、MOCKUP與PROTOTYPE的差異?來看看完整的產品UI設計流程

它寫得非常清楚!
包含執行各個階段該由誰來負責?(PM專案經理、UI設計師、前端、後端工程師…等等)
以及可能會遇到上的哪些問題?(客戶突然改設計、要求增加功能…等等各式各樣的意外)
並且它用比較視覺化的方式在說明Wireframe、Mockup與Prototype之間的差異。

小妹用很視傳系的方式來理解與比喻:

Wireframe → 草稿

https://ithelp.ithome.com.tw/upload/images/20180108/20107810hfF3W7eXTV.jpg

初步對於畫面的構想草稿,大概哪個位置想擺放什麼。

Mockup → 線稿+初步定色

https://ithelp.ithome.com.tw/upload/images/20180108/20107810aKSB1f6LOp.jpg

將草稿上線稿、並且加上初步構想的顏色,看看整體和諧度。

Prototype → 整體修細與上色完稿

https://ithelp.ithome.com.tw/upload/images/20180108/20107810mH36n1syZ8.jpg

色彩確定後就開始大範圍的精細繪圖、上陰影與環境色等等,一邊觀察整體視覺感,最後完稿。

小妹用我很喜歡的一位P網繪師的過程繪來比喻XD
這裡也附上他的P網與作品Id!
phantania
水色【メイキング】と最近の落書き

視傳系動物真的得用比較圖像化的方式來理解與說明,
不知道這樣的比喻有沒有比較好理解一些>_<


上一篇
【Day19】分享炫砲的互動性網站!-Part 2
下一篇
【Day21】不小心害工程師算數學之旅TAT
系列文
一隻巨大的UI/UX菜鳥30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
JasonYang
iT邦新手 5 級 ‧ 2018-01-10 00:16:38

甚至會把 Wireframe 畫的越醜越好,顏色僅有黑白、按鈕只是一個方格,醜到會讓你覺得有點搞笑的程度

我們那時候真的畫的蠻醜的

我要留言

立即登入留言